<!-- 游戏结束后的展示	 -->
<template>
	<view class="bd">
		<view class="TheEndScene">
			<view class="ifWin">
				*排行榜*
			</view>
			<view class="backWhite">

				<view class="ShowMsg">
					<view class="Num1">
						<view class="Pic">
							<image class="Num1Pic" src="/static/奖牌-1.png"></image>
						</view>

						<view class="Num1Msg">
							<image class="Num1MsgPic" :src="playerL.avatarurl"></image>
							<view class="Num1MsgMsg">

								{{playerL.nickname}}
							</view>
						</view>
						<view class="Num1Credit">
							{{playerL.scoreAll}}
						</view>
					</view>
					<view class="Num1">
						<view class="Pic">
							<image class="Num1Pic" src='../../../static/奖牌-2.png'></image>
						</view>

						<view class="Num1Msg">
							<image class="Num1MsgPic" :src="playerR.avatarurl"></image>
							<view class="Num1MsgMsg">

								{{playerR.nickname}}
							</view>
						</view>
						<view class="Num1Credit">
							{{playerR.scoreAll}}
						</view>
					</view>
				</view>
				<view class="showCredit">
					积分奖励：200分
				</view>
				<view class="btnCtn">
					<view class="keep" @click="GameAgain()">
						再来一局
					</view>
					<view class="giveup" @click="GiveupGame()">
						退出
					</view>
				</view>
			</view>

		</view>

	</view>
</template>
<style>
	.giveup {
		width: 200rpx;
	}

	.keep {

		flex: 1;
		background: linear-gradient(to right, rgb(47, 192, 248), rgb(37, 174, 255));
	}

	.btnCtn {
		text-align: center;
		line-height: 100rpx;
		display: flex;
		border-radius: 20rpx;
		margin-top: 60rpx;
		height: 100rpx;
		background: linear-gradient(to right, rgb(37, 174, 255), rgb(255, 255, 255));
	}

	.showCredit {
		bottom: 100rpx;
		margin-top: 80rpx;
		text-align: center;
	}

	.Num1MsgMsg {
		display: inline-block;
		line-height: 120rpx;
	}

	.Num1MsgPic {
		border-radius: 50%;
		margin-right: 10rpx;
		width: 100rpx;
		height: 100rpx;
		margin-top: 10rpx;
	}

	.pic {
		display: flex;
		flex: 1;

	}

	.Num1Credit {
		text-align: center;
		line-height: 120rpx;
		flex: 1;



	}

	.Num1Msg {
		padding-left: 10rpx;
		flex: 3;
		display: flex;

	}

	.Num1Pic {
		width: 80rpx;
		height: 80rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;


	}

	.Num1 {
		flex: 1;
		display: flex;
		flex-direction: row;
		height: 120rpx;
		width: 100%;
		margin-bottom: 20rpx;

	}

	.ShowMsg {
		display: flex;
		flex-direction: column;
		transform: translateY(70rpx);
		width: 100%;
		height: 150px;

	}

	.backWhite {
		background-color: white;
		width: 97%;
		height: 97%;
		margin: auto;
		border-radius: 40rpx;
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		box-shadow: 2rpx 4rpx 2rpx rgb(208, 247, 254);
	}

	.ifWin {
		position: absolute;
		left: 50%;
		transform: translateX(-50%) translateY(10rpx);
		font-weight: bold;
		font-size: 1rem;
		color: rgb(191, 250, 252);
		background: linear-gradient(to right, rgb(47, 192, 248), rgb(37, 174, 255));
		width: 200rpx;
		height: 50rpx;
		text-align: center;
		border-radius: 0 0 30% 30%;
	}

	.bd {
		position: relative;


		z-index: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: rgba(0, 0, 0, 0.4);

	}

	.TheEndScene {
		margin-top: 340rpx;
		position: absolute;
		width: 300px;
		height: 330px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 40rpx;
		background: linear-gradient(to right, rgb(47, 192, 248), rgb(37, 174, 255));
	}
</style>
<script>
	export default {
		props: {
			playerL: {
				type: Object,
				required: true,
			},
			playerR: {
				type: Object,
				required: true,
			},
			ifWin: {
				type: String,
				required: true,
			}
		},
		data() {
			return {

			}
		},
		methods: {
			//重新开始
			GameAgain() {
				//TODO应该要调用父组件的函数
				this.$emit('game-again')
			},
			//退出游戏
			GiveupGame() {
				//TODO应该要调用父组件的函数
				this.$emit('game-giveup')
			}
		}
	}
</script>